<template>
  <div class="user_wrapper">
    <div class="left" :class="open ? 'leftOpen' : ''">11</div>
    <div class="right" :class="open ? 'rightOpen' : ''">
      <el-button @click="open = !open">开关</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const open = ref(false)
</script>

<style lang="scss" scoped>
.user_wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 250px;
    height: 100%;
    background: aquamarine;
    transition: all 0.5s;
  }
  .leftOpen {
    width: 50px;
  }
  .right {
    height: 100%;
    background: blueviolet;
    flex: 1 1 auto;
  }
}
</style>
